@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    /* 基础颜色 */
    --background: rgb(255, 255, 255); /* 纯白色 */
    --foreground: rgb(20, 24, 34); /* 深灰近黑色 */

    /* 卡片相关 */
    --card: rgb(255, 255, 255); /* 纯白色 */
    --card-foreground: rgb(20, 24, 34); /* 深灰近黑色 */

    /* 弹出层 */
    --popover: rgb(255, 255, 255); /* 纯白色 */
    --popover-foreground: rgb(20, 24, 34); /* 深灰近黑色 */

    /* 主要颜色 */
    --primary: rgb(23, 27, 37); /* 深色 */
    --primary-foreground: rgb(241, 245, 249); /* 浅灰白色 */

    /* 次要颜色 */
    --secondary: rgb(241, 245, 249); /* 浅灰白色 */
    --secondary-foreground: rgb(23, 27, 37); /* 深色 */

    /* 柔和色调 */
    --muted: rgb(241, 245, 249); /* 浅灰白色 */
    --muted-foreground: rgb(100, 116, 139); /* 中灰色 */

    /* 强调色 */
    --accent: rgb(241, 245, 249); /* 浅灰白色 */
    --accent-foreground: rgb(23, 27, 37); /* 深色 */

    /* 危险色 */
    --destructive: rgb(239, 68, 68); /* 红色 */
    --destructive-foreground: rgb(241, 245, 249); /* 浅灰白色 */

    /* 功能色 */
    --border: rgb(226, 232, 240); /* 浅灰色边框 */
    --input: rgb(226, 232, 240); /* 浅灰色输入框 */
    --ring: rgb(20, 24, 34); /* 深灰近黑色 */

    /* 图表颜色 */
    --chart-1: rgb(235, 94, 66); /* 红橙色 */
    --chart-2: rgb(43, 138, 132); /* 青绿色 */
    --chart-3: rgb(47, 73, 94);
    --chart-4: rgb(242, 182, 64); /* 金黄色 */
    --chart-5: rgb(255, 122, 69); /* 橙色 */

    --radius: 0.5rem;

    /******************** sidebar ********************/

    --sidebar-background: rgb(250, 250, 250);
    --sidebar-foreground: rgb(66, 66, 66);
    --sidebar-primary: rgb(26, 26, 26);
    --sidebar-primary-foreground: rgb(250, 250, 250);
    --sidebar-accent: rgb(244, 244, 244);
    --sidebar-accent-foreground: rgb(26, 26, 26);
    --sidebar-border: rgb(230, 230, 230);
    --sidebar-ring: rgb(0, 123, 255);
  }

  .dark {
    --background: 20 24 34;
    --foreground: 255 255 255;

    --card: 255 255 255;
    --card-foreground: 255 255 255;

    --popover: 255 255 255;
    --popover-foreground: 255 255 255;

    --primary: 83 55 255;
    --primary-foreground: 255 255 255;

    --secondary: 255 255 255;
    --secondary-foreground: rgb(241, 245, 249);

    --muted: rgb(30, 41, 59);
    --muted-foreground: rgb(148, 163, 184);

    --accent: rgb(30, 41, 59);
    --accent-foreground: rgb(241, 245, 249);

    --destructive: 127 29 29;
    --destructive-foreground: 241 245 249;

    --border: 255 255 255;
    --input: rgb(30, 41, 59);
    --ring: rgb(203, 213, 225);

    --chart-1: rgb(56, 97, 220);
    --chart-2: rgb(47, 133, 90);
    --chart-3: rgb(230, 126, 34);
    --chart-4: rgb(147, 51, 234);
    --chart-5: rgb(236, 72, 153);

    /******************** sidebar ********************/

    --sidebar-background: rgb(25, 25, 25);
    --sidebar-foreground: rgb(245, 245, 245);
    --sidebar-primary: rgb(37, 106, 219);
    --sidebar-primary-foreground: rgb(255, 255, 255);
    --sidebar-accent: rgb(36, 36, 36);
    --sidebar-accent-foreground: rgb(245, 245, 245);
    --sidebar-border: rgb(36, 36, 36);
    --sidebar-ring: rgb(51, 153, 255);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground/80;
  }
}
